<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <table align="center" border="1" cellpadding="10">
	 	   <caption><h1>用户信息表</h1></caption>
	 	   <thead>
	 	   	<tr>
	 	   	     <tr>
	 	   	   	  <th>姓名</th>
	 	   	   	  <th>年龄</th>
	 	   	   	  <th>性别</th>
	 	   	   	  <th>邮箱</th>
	 	   	   	  <th>操作</th>
	 	   	   </tr>
	 	   	</tr>
	 	   </thead>
	 	   <tbody id="tb">
	 	   	   	<tr>
	 	   	   	  <td>王二</td>
	 	   	   	  <td>21</td>
	 	   	   	  <td>男</td>
	 	   	   	  <td>123456@qq.com</td>
	 	   	   	  <td><input type="button" value="删除" id="sc"></td>
	 	   	    </tr 
	 	   </tbody>
	 	   <tfoot>
	 	   	      <tr>
	 	   	      	<td><input type="button" value="删除第一行" id="first"></td>
	 	   	      	<td><input type="button" value="删除最后一行" id="last"></td>
	 	   	      </tr>
	 	   </tfoot>
	 </table>
	 <hr/>
	 <form align="center">
	 	  <p>姓名:<input type="text" name="username" id="username"></p>
	 	  <p>年龄:<input type="text" name="age" id="age"></p>
          <p>性别:<input type="radio" name="gender" value="male" checked id="male">男
                  <input type="radio" name="gender" value="female" id="female">女</p>
	 	  <p>邮箱:<input type="text" name="email" id="email"></p>
	 	  <input type="button" value="提交数据" id="btn">
	 </form>
</body>
<script>
	   function $(id){
         return document.getElementById(id);
	   }
	   function c(ele){
         return document.createElement(ele);
	   }
	   var btn = document.getElementById('btn');
	   btn.onclick = function(){
		   var username= $("username").value;
		   var age= $("age").value;
		   var gender = $('male').checked? $('male').value: $('female').value;
		   var email= $("email").value;

		   var tdName=c('td');
		   var tdAge=c('td');
	       var tdGender=c('td');
	       var tdEmail=c('td');

		       tdName.innerHTML=username;
		       tdAge.innerHTML=age;
		       tdGender.innerHTML=gender;
		       tdEmail.innerHTML=email;

			var tdDel = c('td');
			var delBtn = c('input');
			delBtn.type = 'button';
			delBtn.value = '删除';
			delBtn.onclick = function(){
		
				$('tb').removeChild(this.parentNode.parentNode);
			}
		
			   tdDel.appendChild(delBtn);

		       var tr=c('tr');

		       tr.appendChild(tdName);
		       tr.appendChild(tdAge);
		       tr.appendChild(tdGender);
		       tr.appendChild(tdEmail);
		       tr.appendChild(tdDel);

		       $('tb').appendChild(tr);
	    }
	   var first = document.getElementById('first');
	   first.onclick = function(){
          tb.removeChild(tb.children[0]);
	   }
	   var last = document.getElementById('last');
	   last.onclick = function(){
          tb.removeChild(tb.children[tb.children.length-1]);
	   }
	   var sc = document.getElementById('sc');
	   sc.onclick = function(){
          tb.removeChild(tb.children[0]);
	   }
</script>
</html>